import React, { Component } from 'react'
import { connect } from 'dva'
import { Button, Form, Input, Icon, } from 'antd'
import s from './index.less'
// import logo from '../../images/logo.png'

const FormItem = Form.Item

@connect(s => ({
  ...s['login'],
  loading: s.loading.models['login']
}))
class Login extends Component {
  // constructor(props) {
  //   super(props)
  //   this.state = {}
  // }
  // componentDidMount() {}
  onLogin = (e) => {
    e.preventDefault()
    const { form, location, dispatch } = this.props
    form.validateFields(async (err, val) => {
      if (!err) {
        dispatch({
          type: 'login/login',
          val,
          location
        })
      }
    })
  }

  renderPsw = () => {
    const {loading, form} = this.props
    const { getFieldDecorator } = form
    return (
      <div className={s['form-item']}>
        <p className={s['form-title']}>用户登录</p>
        <FormItem>
          {getFieldDecorator('username', {
            initialValue: 'admin',
            rules: [
              { required: true, message: '请输入' },
            ],
          })(<Input
            prefix={<Icon type="user" />}
            size="large"
            placeholder={'账号'}/>)}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            initialValue: '123456',
            rules: [
              { required: true, message: '请输入' },
            ],
          })(
            <Input
              prefix={<Icon type="lock" />}
              size="large" placeholder={'密码'}
              type={'password'}/>,
          )}
        </FormItem>
        <div className={s['login-btn']}>
          <Button
            size={'large'}
            type={'primary'}
            htmlType={'submit'}
            loading={loading}
          >登录</Button>
        </div>
      </div>
    )
  }
  renderBody = () => {
    return (
      <div className={s['login-bd']}>
        <div className={s['login-hd']}>
          {/*<img src={logo} alt=""/>*/}
          <p>XXX后台系统</p>
        </div>
        <div className={s['form-box']}>
          <div className={s['login-tab']}>
            <Form onSubmit={this.onLogin}>
              {this.renderPsw()}
            </Form>
          </div>
        </div>
      </div>
    )
  }
  render() {
    return (
      <div className={s['login-box']}>
        <div className={s['login-bg']}/>
        {this.renderBody()}
      </div>
    )
  }
}

export default Form.create()(Login)

